<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联栗炮计算器</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .button-container {
        text-align: center;
    }
    .button-container button {
        padding: 10px;
        margin: 5px;
        width: 40px;
        border: none;
        background-color: #4CAF50;
        color: white;
        cursor: pointer;
        font-size: 16px;
    }
    .button-container button:hover {
        background-color: #45a049;
    }
    #result {
        margin-top: 20px;
        border: 1px solid #ddd;
        padding: 10px;
        height: 200px;
        overflow-y: auto;
    }
</style>
<script>
var cardCounts = 0;
var level = 0;

function setCardCounts(count) {
    cardCounts = count;
    document.getElementById('cardCounts').innerText = cardCounts;
    calculateRankAndLevel();
}

function setLevel(lvl) {
    level = lvl;
    document.getElementById('level').innerText = level;
    calculateRankAndLevel();
}

function calculateRankAndLevel() {
    var found = false;
    var resultText = "场值 = " + cardCounts + "，目标值 = " + level + "：";

    for (var x = 1; x <= 6; x++) {
        for (var y = 1; y <= 6; y++) {
            var tempA = 2 * x + y;
            var tempB = x + y;
            if (cardCounts == tempA && level == tempB) {
                resultText += " 超量rank = " + x + "，融合level=" + y + "<br>";
                found = true;
                break;
            }
        }
        if (found) break;
    }

    if (!found) {
        resultText += " 无匹配结果<br>";
    }

    var resultDiv = document.getElementById('result');
    resultDiv.innerHTML += resultText; // Append the new result
    resultDiv.scrollTop = resultDiv.scrollHeight; // Scroll to the bottom
}
</script>
</head>
<body>

<h2>联栗炮计算器</h2>

<div>
    <span>场值 (1-15):</span>
    <span id="cardCounts">0</span>
    <div id="cardCountsButtons">
        <!-- Generate buttons for card counts from 1 to 15 -->
        <!-- %for i in range(1, 16):
        <button onclick="setCardCounts({i})">{i}</button>
        %endfor -->
        <button onclick="setCardCounts(1)">1</button>
        <button onclick="setCardCounts(2)">2</button>
        <button onclick="setCardCounts(3)">3</button>
        <button onclick="setCardCounts(4)">4</button>
        <button onclick="setCardCounts(5)">5</button>
        <button onclick="setCardCounts(6)">6</button>
        <button onclick="setCardCounts(7)">7</button>
        <button onclick="setCardCounts(8)">8</button>
        <button onclick="setCardCounts(9)">9</button>
        <button onclick="setCardCounts(10)">10</button>
        <button onclick="setCardCounts(11)">11</button>
        <button onclick="setCardCounts(12)">12</button>
        <button onclick="setCardCounts(13)">13</button>
        <button onclick="setCardCounts(14)">14</button>
        <button onclick="setCardCounts(15)">15</button>

    </div>
</div>

<div>
    <span>目标值 (1-15):</span>
    <span id="level">0</span>
    <div id="levelButtons">
        <!-- Generate buttons for levels from 1 to 15 -->
        <button onclick="setLevel(1)">1</button>
        <button onclick="setLevel(2)">2</button>
        <button onclick="setLevel(3)">3</button>
        <button onclick="setLevel(4)">4</button>
        <button onclick="setLevel(5)">5</button>
        <button onclick="setLevel(6)">6</button>
        <button onclick="setLevel(7)">7</button>
        <button onclick="setLevel(8)">8</button>
        <button onclick="setLevel(9)">9</button>
        <button onclick="setLevel(10)">10</button>
        <button onclick="setLevel(11)">11</button>
        <button onclick="setLevel(12)">12</button>
        <button onclick="setLevel(13)">13</button>
        <button onclick="setLevel(14)">14</button>
        <button onclick="setLevel(15)">15</button>
    </div>
</div>

<p id="result"></p>

</body>
</html>
